<script setup lang="ts">
import {ref, Ref} from "vue";
import {
  Plus,
  UploadFilled,
} from '@element-plus/icons-vue';

const courseMode: Ref<'smart' | 'mooc'> = ref('smart');

const imageUrl: Ref<string> = ref('');
</script>

<template>
  <div class="course-create-container">
    <el-form class="course-create-form" label-width="auto" label-position="top">
      <el-form-item label="课程名称" id="courseName">
        <el-input/>
      </el-form-item>
      <el-form-item label="课程介绍" id="courseDetail">
        <!-- TODO maxRows 不生效 -->
        <el-input
            type="textarea"
            class="course-detail-textarea"
            :autosize="{ maxRows: 8,  minRows: 4 }"
        />
      </el-form-item>
      <el-form-item label="课程封面" id="courseCover">
        <el-upload
            action="#"
            :auto-upload="false"
            class="avatar-uploader"
            :show-file-list="false"
        >
          <img v-if="imageUrl" :src="imageUrl" class="avatar" alt="course-cover"/>
          <el-icon v-else class="avatar-uploader-icon"><plus /></el-icon>
        </el-upload>
      </el-form-item>
      <el-form-item label="授课模式" id="courseMode">
        <el-radio-group v-model="courseMode">
          <el-radio value="smart">智课模式</el-radio>
          <el-radio value="mooc">经典MOOC模式</el-radio>
        </el-radio-group>
      </el-form-item>
      <transition-group name="slide">
        <el-form-item label="声音模型" v-if="courseMode === 'smart'" key="smart_1" id="voiceModel">
          <el-select/>
        </el-form-item>
        <el-form-item label="虚拟教师形象" v-if="courseMode === 'smart'" key="smart_2" id="appearanceModel">
          <el-select/>
        </el-form-item>
        <el-form-item label="课程视频" v-if="courseMode === 'mooc'" key="mooc_1" id="courseVideo">
          <el-upload
              class="course-video-upload"
              drag
              action="#"
          >
            <el-icon class="el-icon--upload"><upload-filled/></el-icon>
            <div class="el-upload__text">
              将文件拖拽到此处或<em>点击上传</em>
            </div>
          </el-upload>
        </el-form-item>
        <el-form-item key="button-group">
          <el-button type="primary" style="width: 120px;">创建</el-button>
          <el-button type="info" style="width: 120px;">清空</el-button>
        </el-form-item>
      </transition-group>
    </el-form>
  </div>
</template>

<style scoped lang="scss">
.course-create-container {
  margin-top: 20px;

  .course-create-form {
    width: 700px;
  }
}

.slide-enter-active,
.slide-leave-active {
  transition: all .3s;
}

.slide-enter-from,
.slide-leave-to {
  opacity: 0;
  transform: translateY(50px);
}

.slide-move {
  transition: all .3s;
}

.slide-leave-active {
  position: absolute;
}

.avatar-uploader .avatar {
  width: 178px;
  height: 178px;
  display: block;
}
</style>